<template>
  <div class="preview-container">
    <div class="preview-header" :class="{ 'fullscreen-header': isFullscreen }">
      <el-button type="primary" link @click="toggleFullscreen">
        <el-icon>
          <component :is="isFullscreen ? Close : FullScreen" />
        </el-icon>
        {{ isFullscreen ? '退出' : '全屏' }}
      </el-button>
    </div>
    <div class="preview-wrapper" :class="{ 'fullscreen': isFullscreen }">
      <div class="preview-main-flex" :class="{ 'standard-mode': setting.mode === 2 }">
        <div class="preview-content-wrapper">
          <div v-if="setting.mode === 2" class="system-info">
            <div class="system-info-header">
              <div v-if="setting.logo" class="system-logo">
                <img :src="setting.logo" alt="">
              </div>
              <div class="system-name" v-html="setting.name"></div>
            </div>
            <div class="system-description">
              <div v-html="setting.description"></div>
            </div>
          </div>
          <div class="login-content" ref="loginRef">
            <div class="login-card">
              <div class="card-body">
                <div class="login-index" :class="setting.mode">
                  <!-- 顶部注册账号 -->
                  <a class="register-link" href="javascript:;">
                    <span class="link-btn">注册</span>
                  </a>
                  <div class="login-container">
                    <!-- 左侧二维码区域 -->
                    <div v-if="setting.useQrCode" class="qrcode-section hide-on-mobile">
                      <div class="qrcode-box">
                        <div v-if="setting.mode !== 2" class="qrcode-title">{{ getText(setting.name) }}</div>
                        <div class="qrcode-placeholder">
                          <el-icon :size="40"><Picture /></el-icon>
                          <span>二维码预览</span>
                        </div>
                        <div class="qrcode-info">请使用微信扫描二维码登录</div>
                      </div>
                    </div>

                    <!-- 右侧登录表单区域 -->
                    <div class="form-section" :class="{ 'qrcode-padding': setting.useQrCode }">
                      <div class="form-content">
                        <div class="form__span_box">
                          <span class="form__span switch-btn cur_form">账号密码登录</span>
                          <span class="form__span switch-btn">手机号登录</span>
                        </div>

                        <div class="form-box">
                          <el-form class="login-form">
                            <el-form-item>
                              <el-input placeholder="请输入账号名" />
                            </el-form-item>
                            <el-form-item>
                              <el-input placeholder="请输入登录密码" type="password" show-password />
                            </el-form-item>
                            <el-form-item>
                              <el-button class="login-btn" type="primary" block>登录</el-button>
                            </el-form-item>
                            <div v-if="setting.extraButtons" class="extra-buttons">
                              <el-form-item v-for="(btn, index) in setting.extraButtons" :key="index">
                                <el-button type="primary" block class="login-btn">
                                  {{ btn.text }}
                                </el-button>
                              </el-form-item>
                            </div>
                          </el-form>
                        </div>

                        <div class="forget-pass-btn">
                          <a class="form__link" href="javascript:;">找回密码</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="preview-copyright" v-html="setting.copyright"></div>
      <div class="preview-background">
        <el-carousel v-if="setting.backgrounds && setting.backgrounds.length > 0" :interval="setting.delay * 1000" indicator-position="none" arrow="never" :pause-on-hover="false" height="100%">
          <el-carousel-item v-for="bg in setting.backgrounds" :key="bg">
            <img :src="bg" class="background-image" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable */
import { ref } from 'vue'
import { FullScreen, Close, Picture } from '@element-plus/icons-vue'

const props = defineProps({
  setting: {
    type: Object,
    required: true
  },
  isFullscreen: {
    type: Boolean
  }
})
const emits = defineEmits(['close'])
const isFullscreen = ref(props.isFullscreen || false)
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  if (!isFullscreen.value) {
    emits('close')
  }
}

const getText = (data) => {
  const tempElement = document.createElement('div')
  tempElement.innerHTML = data
  return tempElement.textContent || tempElement.innerText
}
</script>

<style lang='scss' scoped>
.preview-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f7fa;

  .preview-header {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2001;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    &.fullscreen-header {
      position: fixed;
    }
  }

  .preview-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    &.fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2000;
      background-color: #fff;
    }

    .login-content {
      height: 100%;
      display: grid;
      place-items: center;
      z-index: 1;

      .login-card {
        position: relative;
        padding: 30px 20px 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        background: #fff;
        display: flex;
        flex-direction: column;

        .card-body {
          flex: 1;
          overflow: hidden;
        }
      }
    }

    .preview-copyright {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 2;
    }

    .preview-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;

      :deep(.el-carousel) {
        height: 100%;
      }

      :deep(.el-carousel__container) {
        height: 100%;
      }

      .background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.login-index {
  min-height: 339px;
  height: 100%;
  overflow: hidden;

  .register-link {
    cursor: pointer;
    height: 70px;
    width: 70px;
    background-image: linear-gradient(to right bottom, rgb(186, 172, 255), rgb(48, 128, 255));
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
    z-index: 2;

    .link-btn {
      font-size: 14px;
      color: #fff;
      font-weight: 500;
      position: relative;
      top: 10px;
      right: 7px;
    }
  }

  .login-container {
    display: flex;
    height: 100%;
    position: relative;
    z-index: 1;
    
    @media screen and (max-width: 768px) {
      justify-content: center;
      padding: 0 20px;
    }

    .qrcode-section {
      padding: 60px 70px 60px 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 300px;
      box-sizing: border-box;
      border-right: 1px solid #e5e5e5;
      background: rgba(255, 255, 255, 0.9);

      &.hide-on-mobile {
        @media screen and (max-width: 768px) {
          display: none;
        }
      }

      .qrcode-box {
        text-align: center;

        .qrcode-title {
          font-size: 16px;
          color: #333;
          margin-bottom: 20px;
        }

        .qrcode-placeholder {
          width: 160px;
          height: 160px;
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #f5f7fa;
          border: 1px dashed #dcdfe6;
          border-radius: 4px;
          color: #909399;
          gap: 8px;
        }

        .qrcode-info {
          font-size: 14px;
          color: #999;
          margin-top: 20px;
        }
      }
    }

    .form-section {
      position: relative;
      width: 440px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 0.9);
      
      &.qrcode-padding {
        padding-left: 50px;
      }

      @media screen and (max-width: 768px) {
        padding-left: 0;
        width: 100%;
        max-width: 440px;
      }

      .form-content {
        padding-top: 20px;

        .form__span_box {
          margin-bottom: 30px;
          display: flex;
          gap: 40px;

          .form__span {
            font-size: 16px;
            color: #666;
            cursor: pointer;
            padding-bottom: 8px;
            border-bottom: 2px solid transparent;

            &.cur_form {
              color: var(--el-color-primary);
              border-bottom-color: var(--el-color-primary);
            }
          }
        }

        .form-box {
          .login-form {
            .login-btn {
              height: 50px;
              width: 100%;
              font-size: 16px;
            }

            :deep(.el-form-item) {
              margin-bottom: 20px;
              
              .el-input {
                --el-input-height: 50px;
              }
            }
          }
        }

        .extra-buttons {
          // Styles for extra buttons
        }

        .forget-pass-btn {
          text-align: right;
          margin-top: 16px;
          
          .form__link {
            color: #666;
            text-decoration: none;
            font-size: 14px;
            
            &:hover {
              color: var(--el-color-primary);
            }
          }
        }
      }
    }
  }
}

:deep(.el-form-item__error:before) {
  display: none !important;
}

.preview-main-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  &.standard-mode {
    .preview-content-wrapper {
      display: flex;
      gap: 60px;
      align-items: flex-start;
      max-width: 1200px;
      padding: 0 20px;

      @media screen and (max-width: 900px) {
        flex-direction: column;
        align-items: center;
        gap: 30px;
      }
    }
  }

  @media screen and (max-width: 900px) {
    min-height: unset;
  }
}

.preview-content-wrapper {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  max-width: 1200px;
  padding: 0 20px;

  @media screen and (max-width: 900px) {
    flex-direction: column;
    gap: 30px;
  }
}

.system-info {
  position: relative;
  z-index: 1;
  width: 420px;
  min-width: 320px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;

  @media screen and (max-width: 900px) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
  }

  .system-info-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 32px;
    gap: 18px;

    .system-logo img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 50%;
      margin-bottom: 0;
    }
    .system-name {
      
    }
  }
  .system-description {
    font-size: 16px;
    color: #4a4a4a;
    text-align: left;
    line-height: 1.8;
  }
}
</style>